<style lang="less" scoped>
    @import '../../styles/common.less';
    /*@import './components/table.less';*/
    .main-table {
        margin-top: 10px;
    }
    .pagination {
        margin-top: 10px;
        padding: 0 10px;
    }
</style>

<template>
    <div>
        <Row>
            <!--<Input v-model="searchConName3" placeholder="请输入姓名搜搜..." style="width: 200px" />
            <span @click="handleSearch3" style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
            <Button @click="handleCancel3" type="ghost" >取消</Button>-->
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList" show-total show-elevator></Page>
        </div>
        <Modal
                v-model="modalVisible"
                title="用户信息"
                @on-ok="modalVisible = false"
                @on-cancel="modalVisible = false">
            <Form :model="formData" :label-width="80">
                <FormItem label="ID">
                    {{formData.id}}
                </FormItem>
                <FormItem label="账号">
                    {{formData.loginid}}
                </FormItem>
                <FormItem label="名称">
                    {{formData.name}}
                </FormItem>
                <FormItem label="电话">
                    {{formData.phone}}
                </FormItem>
                <FormItem label="状态">
                    {{formData.status}}
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="saveModalVisible" :title="(formData.id ? '修改' : '新增') + '用户'">
            <Form :model="formData" :label-width="80">
                <FormItem label="账号">
                    <Input v-model="formData.loginid" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="密码">
                    <Input type="password" v-model="formData.password" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="名称">
                    <Input v-model="formData.name" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="电话">
                    <Input v-model="formData.phone" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="排序">
                    <Input v-model="formData.sequence" style="width: 300px"></Input>
                </FormItem>
                <!--<FormItem>-->
                <!--<Button type="primary" @click="userSave">保存</Button>-->
                <!--<Button type="ghost" style="margin-left: 8px" @click="saveModalVisible = false">取消</Button>-->
                <!--</FormItem>-->
            </Form>
            <div slot="footer">
                <Button type="primary" @click="userSave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="saveModalVisible = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
	import util from '@/libs/util';
	import CONSTANTS from '@/config/constants';

	const formStructure = {
		loginid: '',
		name: '',
		password: '',
		phone: '',
		sequence: '',
		id: ''
	};

	export default {
		name: 'exportable-table',
		data () {
			return {
				columns: [{
					title: '账号',
					key: 'loginid'
				}, {
					title: '名称',
					key: 'name'
				}, {
					title: '电话',
					key: 'phone'
				}, {
					title: '状态',
					key: 'status'
				}, {
					title: '操作',
					key: 'action',
					width: 200,
					align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'primary',
									size: 'small'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.detail(params.row.id);
									}
								}
							}, '详情'),
							h('Button', {
								props: {
									type: 'primary',
									size: 'small'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.showEdit(params.row);
									}
								}
							}, '修改'),
							h('Button', {
								props: {
									type: 'error',
									size: 'small'
								},
								on: {
									click: () => {
										this.delete(params.row.id)
									}
								}
							}, '删除')
						]);
					}
				}],
				data: [],
				formData: {},
				modalVisible: false,
				saveModalVisible: false,

                total: 0,
				pageIndex: 1,
				pageSize: 10
			};
		},
		mounted() {
			this.loadList();
		},
		methods: {
			loadList() {
				util.ajax.post(CONSTANTS.USER_LIST, util.toFormData({
					page: this.pageIndex,
					size: this.pageSize
				})).then(res => {
					this.data = res.data.data.list;
					this.total = res.data.data.total;
				});
			},
			detail(id) {
				util.ajax.post(CONSTANTS.USER_DETAIL, util.toFormData({
					id: id
				})).then(res => {
					if (res.data.data) {
						this.formData = res.data.data;
						this.modalVisible = true;
					} else {
						this.$Modal.error({
							title: '警告',
							content: '出错了'
						});
					}
				});
			},
			showAdd() {
				this.formData = {};
				this.saveModalVisible = true;
			},
			showEdit(obj) {
				this.formData = {};
				for (let key in formStructure) {
					this.formData[key] = obj[key];
				}
				this.saveModalVisible = true;
			},
			userSave(){
				let formData = {};
				for (let key in this.formData) {
					formData[key] = this.formData[key];
				}
				util.ajax.post(CONSTANTS.USER_SAVE, util.toFormData(formData)).then(res => {
					if (res.data.message === 'SUCCESS') {
						this.saveModalVisible = false;
						this.$Message.success('保存成功！');
						this.pageIndex = 1;
						this.loadList();
					} else {
						this.$Message.warning(res.data.message || '未知错误！');
					}
				});
			},
			delete(id) {
				this.$Modal.confirm({
					title: '提示',
					content: '<p>确定删除？</p>',
					onOk: () => {
                        /*util.ajax.post()*/
					},
					onCancel: () => {
					}
				});
			}
		}
	};
</script>
